<template>
    <div>

        <div style="margin: 10px 0">
            <el-input style="width: 250px" placeholder="订单编号" suffix-icon="el-icon-edit" class="ml-5" v-model="orderNo"></el-input>
            <el-input style="width: 250px" placeholder="所购农产品" suffix-icon="el-icon-message" class="ml-5" v-model="products"></el-input>
            <el-input style="width: 250px" placeholder="购买人" suffix-icon="el-icon-message" class="ml-5" v-model="buyer"></el-input>
            <el-button class="ml-10"  type="primary" @click="load">搜索</el-button>
            <el-button class="ml-10" type="warning" @click="reset">重置</el-button>
        </div>

        <div style="margin: 10px 0">
            <!--<el-button type="primary" @click="handleAdd">新增</el-button>-->
            <!--<el-popconfirm
                    class="ml-5"
                    confirm-button-text='确定'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    icon-color="red"
                    title="确定删除吗？"
                    @confirm="delBatch"
            >
                <el-button type="danger"  slot="reference" >批量删除</el-button>
            </el-popconfirm>-->
            <el-upload
                    action="http://localhost:8081/order/import"
                    :show-file-list=false
                    :accept="'xlsx'"
                    :on-success="importSuccess"
                    :on-error="importFail"
                    style="display: inline-block"
            >
                <el-button type="primary" class="ml-5"  >导入</el-button>
            </el-upload>

            <el-button type="primary" @click="exp" class="ml-5">导出</el-button>
        </div>

        <el-table :data="tableData" border stripe :header-row-class-name="headerBg" @selection-change="handleSelectionChange">  //border stripe把表格变成斑马线风格
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="orderNo" label="订单编号" width="140"></el-table-column>
            <el-table-column prop="products" label="所购农产品" width="120"></el-table-column>
            <el-table-column prop="buyer" label="购买人"></el-table-column>
            <el-table-column prop="buyTime" label="购买时间"></el-table-column>
            <el-table-column prop="buyerIphone" label="购买人电话"></el-table-column>
            <el-table-column prop="buyerAddress" label="购买人地址"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="success" @click="handleEdit(scope.row)">查看详情</el-button>
                    <!--<el-popconfirm
                            class="ml-5"
                            confirm-button-text='确定'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            title="确定删除吗？"
                            @confirm="del(scope.row.id)"
                    >
                        <el-button type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>-->
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageSize"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog title="订单信息" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form" label-width="80px" size="small">
                <el-form-item label="订单编号">
                    <el-input v-model="form.orderNo" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所购农产品">
                    <el-input v-model="form.products" :disabled="true" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="购买人">
                    <el-input v-model="form.buyer" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="购买人电话">
                    <el-input v-model="form.buyerIphone" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="购买时间">
                    <div class="block">
                        <!--<span class="demonstration">默认</span>-->
                        <el-date-picker
                                v-model="form.buyTime"
                                type="datetime"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="购买人地址">
                    <el-input v-model="form.buyerAddress" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
name: "orderDetail",
    data(){
       return{
           tableData: [],
           total: 0,
           pageNum: 1,   //点进来默认的页数和条数
           pageSize: 5,
           orderNo: '',
           products:'',
           buyer:'',
           form: {
               id: '',
               orderNo: '',
               products:'',
               buyer:'',
               buyTime:'',
               buyerIphone: '',
               buyerAddress:'',
           },
           dialogFormVisible: false,
           multipleSelection: [],
           headerBg: "headerBg"
       }
    },
    created() {
        //请求分页查询数据
        this.load();
    },
    methods:{
        load(){     //封装请求分页查询数据，让其他地方调用
            this.request.get("/order/list",{
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    orderNo: this.orderNo,
                    products: this.products,
                    buyer: this.buyer,
                    saleName:localStorage.getItem("userName")
                }
            }).then(res =>{
                console.log(res)
                this.tableData=res.data.rows
                this.total=res.data.total
            })
        },
        handleInputOpenValue(e) {
            this.$forceUpdate();
        },
        save(){
            this.request.post("/order/update",this.form).then(res => {
                if (res){
                    this.$message.success("更改成功")
                    this.dialogFormVisible=false  //新增完关闭弹窗
                    this.load()
                }else {
                    this.$message.fail("更改失败")
                }
            })
        },
        handleAdd(){   //新增打开表单默认为空
            this.dialogFormVisible=true
            this.form= {}
        },
        handleEdit(row){   //编辑打开为form里面的数据
            this.form= row
            this.dialogFormVisible=true
        },
        del(id){
            this.request.post("/order/delete",id).then(res=>{
                if (res){
                    this.$message.success("删除成功")
                    this.load()
                }else {
                    this.$message.fail("删除失败")
                }
            })
        },
        delBatch(){
            let ids= this.multipleSelection.map(e=>e.id).join()
            this.request.post("/order/delete",ids).then(res=>{
                if (res){
                    this.$message.success("删除成功")
                    this.load()
                }else {
                    this.$message.fail("删除失败")
                }
            })
        },
        reset(){  //重置
                this.orderNo= ""
                this.products= ""
                this.buyer= ""
            this.load()
        },

        handleSelectionChange(val){

            this.multipleSelection=val
            console.log(val)
        },
        handleSizeChange(pageSize){     //点击触发分页跳转,pageSize是web点击后传过来的
            console.log(pageSize)
            this.pageSize=pageSize
            this.load()
        },
        handleCurrentChange(pageNum){
            console.log(pageNum)
            this.pageNum=pageNum
            this.load()
        },
        importSuccess(){
            this.$message.success("文件导入成功")
            this.load()
        },
        importFail(){
            this.$message.error("文件导入失败")
            this.load()
        },
        exp(){
            window.open("http://localhost:8081/order/excel?saleName="+localStorage.getItem("userName"))
        }
    }
}
</script>

<style>
    .headerBg{
        background: #cccccc !important;
    }
</style>
